<!doctype html>

<!--注意：引入thymeleaf的名称空间-->
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
    <style type="text/css">
        table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }

        h1 {
            background: #2B6695;
            border-radius: 6px 6px 6px 6px;
            box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
            color: #FFFFFF;
            font-family:"微软雅黑", "宋体", "黑体", Arial;
            font-size: 18px;
            font-weight: bold;
            height: 25px;
            line-height: 25px;
            margin: 18px 0 !important;
            padding: 8px 0 5px 5px;
            text-shadow: 2px 2px 3px #222222;
        }

        
    </style>
    <script src="common.js"></script>
</head>
<body>
    <div id="isDisplay" style="display: none;">
        <p>欢迎您！<span id="userName"></span> <a href="javascript:void(0);" onclick="logout()">退出登陆</a></p>
        <input type="hidden" id="userId"/>
        <h1>请假审批待办列表</h1>
        <table id="taskList" border="1" width="90%" class="table">
            <tr>
                <th>任务ID</th>
                <th>当前节点</th>
                <th>请假人</th>
                <th>请假天数</th>
                <th>创建时间</th>
                <th>详情</th>
            </tr>
        </table>
        <h1>请假申请</h1>
        请假天数：<input type="text" id="day"/>
        请假原因：<input type="text" id="reason"/>
        <input type="button" value="申请" id="apply" onclick="applyLeave()"/>
    </div>

    <script>
        var user = window.sessionStorage.getItem("loginUser")
        console.log('user:' + user)
        if (!user) {
            window.location.href = "/loginPage.html"
        } else {
            document.getElementById("isDisplay").style.display = "block"
            document.getElementById("userName").innerHTML = JSON.parse(user).name
            document.getElementById("userId").value = JSON.parse(user).id
            loadMyTask()
        }

        function logout() {
            window.sessionStorage.removeItem("loginUser")
            window.location.href = "/index.html"
        }

        function applyLeave() {
            var day = document.getElementById("day").value
            var reason = document.getElementById("reason").value
            var userId = document.getElementById("userId").value

            var xmlHttp = new XMLHttpRequest()
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    alert('提交成功')
                    window.location.href = "/index.html"
                }
            }
            xmlHttp.open("GET", "/api/applyLeave?day=" + day + "&reason=" +reason + "&userId=" + userId, true)
            xmlHttp.send();
        }

        function loadMyTask() {
            var userId = document.getElementById("userId").value
            var xmlHttp = new XMLHttpRequest()
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    console.log(xmlHttp.responseText)
                    var response = JSON.parse(xmlHttp.responseText)
                    if (response.data) {
                        var text = ""
                        response.data.forEach(it => {
                            text = text + '<td>' + it.id + '</td>'
                            text = text + '<td>' + it.name + '</td>'
                            text = text + '<td>' + it.userName + '</td>'
                            text = text + '<td>' + it.day + '</td>'
                            text = text + '<td>' + formatDate(it.createTime) + '</td>'
                            text = text + '<td><a href="/leaveDetail.html?processInstanceId=' + it.processInstanceId + '&userId=' + userId + '&taskId=' + it.id +'">详情</a></td>'
                            var tr = document.createElement('tr')
                            tr.innerHTML = text
                            document.getElementById('taskList').appendChild(tr)
                            text = ""
                        });
                    } else alert('查询失败')
                }
            }
            xmlHttp.open("GET", "/api/queryTask?processDefinitionKey=leave&userId=" +userId, true)
            xmlHttp.send();
        }
    </script>
</body>
</html>